@media (prefers-color-scheme: dark) {
  a,
  body {
    background: #000;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  a,
  body {
    background: white;
    color: #000;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
    "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial,
    sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.dt {
  display: table;
}

.dtc {
  display: table-cell;
}

.fw6 {
  font-weight: 600;
}

.vh-100 {
  height: 100vh;
}

.w-100 {
  width: 100%;
}

.white {
  color: #fff;
}

.bg-dark-pink {
  background-color: #d5008f;
}

.ph3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.tc {
  text-align: center;
}

.f6 {
  font-size: 0.875rem;
}

.v-mid {
  vertical-align: middle;
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .f2-m {
    font-size: 2.25rem;
  }
}

@media screen and (min-width: 60em) {
  .ph4-l {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .f-subheadline-l {
    font-size: 5rem;
  }
}
